<template>
  <div class="home">
    <Header head-title="预约挂号" go-back="true"></Header>
    <section class="Select fw">
        <div class="Doctor">
            <img src="../../../../assets/img/right.png" alt="">
        </div>
        <div>
            <h3 class="fontsM">预约成功</h3>
            <p class="fonts">3天后就诊</p>
        </div>
    </section>
    <section class="bg_blue Success borderR fontCfff">
        <div class="Select fonts">
            <h3>专家门诊</h3>
            <p>平顶山市第一人民医院</p>
        </div>
        <h2 class="fontsM">2020-03-12 09:30-09:00 周四</h2>
        <div class="Select fonts">
            <p>刘艳晓：主任医师</p>
            <p>内分泌代谢科</p>
        </div>
    </section>
    <section class="group fonts">
      <h3 class="HomeH">就诊人信息</h3>
        <div class="Select Reserva">
            <p>就诊人：</p>
            <p>陈圆圆</p>
        </div>
        <div class="Select Reserva">
            <p>挂号费用：</p>
            <p class="fontCO"> 7.9元</p>
        </div>
        <div class="Select Reserva">
            <p>身份证号：</p>
            <p>4127********4949</p>
        </div>
        <div class="Select Reserva">
            <p>手机号：</p>
            <p>18********90</p>
        </div>
        <div class="Select Reserva">
            <p>初诊/复诊：</p>
            <p>初诊</p>
        </div>
        <div class="Reserva SeserMS">
            <p>症状描述：</p>
            <textarea class="SerTexa" name="" id="" cols="30" rows="10"></textarea>
        </div>
    </section>
    <el-button type="primary" @click="SearchSer()">查看我的预约</el-button>
    <el-button type="primary" @click="open()">取消预约</el-button>
    <el-button type="primary" @click="BackHome()">返回首页</el-button>
  </div>
</template>

<script>
import Header from '../../../../components/Header'
export default {
  data () {
    return {

    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    //  点击进入科室  挂号
    BackHome () {
      this.$router.push({
        path: '/'
      })
    },
    //  查看我的预约
    SearchSer () {
      this.$router.push({
        path: '/Record'
      })
    },
    //  点击取消预约
    open () {
      this.$confirm('是否确定取消预约挂号', '取消预约', {
        confirmButtonText: '确定取消',
        cancelButtonText: '再想想',
        type: 'warning',
        customClass: 'Message'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '再想想'
        })
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 1.3rem;
}
.group1 {
    padding-top: 0;
    margin-top: 0;
}
.Doctor {
    background: #329bfe;
}
.Doctor img {
    width: 60%;
    position: relative;
    top: 0.2rem;
}
.fw {
    justify-content:center;
}
.fw h3, .fw p{
    text-align: left;
    padding-left: 0.4rem;
}

.Message {
    width: 3rem;
}
</style>
<style>
.el-message-box__wrapper .el-message-box {
    width: 80%;
}
</style>
